Pull Request Description

Make the difficulty bar clearer

Changes Proposed

I find it difficult to read the encounter difficulty bar at a glance: the difficulty label of the current encounter isn't clear without mousing over the meter

• Add notches to encounter difficulty meter marking difficulty thresholds
• Replace labels for easiest & hardest thresholds to left & right of meter with a label for the current encounter difficulty
• Align meter colour changes to difficulty thresholds: low threshold is the first threshold above 0; high threshold is the last threshold below the max

Related Issues

Fixes #Issue_Number

Checklist

• I have read the contribution guidelines and code of conduct.
• I have tested the changes locally and they are working as expected.
• I have added appropriate comments and documentation for the code changes.
• My code follows the coding style and standards of this project.
• I have rebased my branch on the latest main (or master) branch.
• All tests (if applicable) have passed successfully.
• I have run linters and fixed any issues.
• I have checked for any potential security issues or vulnerabilities.

Screenshots (if applicable)

Additional Notes

Potential improvements

The label to the right of the meter changes in size depending on the length of the word, so it will change if you alter encounter difficulty. This could be fixed by setting the width at startup to fit the longest difficulty name, but it might be more trouble than it's worth.

The HTML meter bar can only show 3 colours. It would be nice to have different colours for each difficulty level (up to a point: the colours should be manually chosen to go from green -> yellow -> red). But that would need more JS to override the meter colours.